<template>
  <div class="user-list">
    <leave-crud ref="crud" title="用户管理" :url="url" :searchOption="searchOption" :cutOperation="['view', 'create', 'edit']">
      <template slot="tableRows">
        <el-table-column prop="name" label="用户名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="isAdmin" label="身份">
          <template slot-scope="props">
            <el-tag v-if="props.row.isAdmin" size="mini">
              管理员
            </el-tag>
            <el-tag v-else size="mini" type="info">
              普通用户
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" min-width="110px">
          <template slot-scope="props">
            {{ props.row.createdAt | date }}
          </template>
        </el-table-column>
      </template>

      <template slot="operationRows">
        <el-table-column min-width="110px">
          <template slot-scope="props">
            <i
              v-if="props.row._id !== $store.state.user._id && !props.row.isAdmin"
              class="el-icon-delete operation-btn"
              title="删除"
              @click="del(props.row._id)">
            </i>
            <i
              v-if="!props.row.isAdmin"
              class="el-icon-edit-outline operation-btn"
              title="设为管理员"
              @click="edit(props.row._id)">
            </i>
          </template>
        </el-table-column>
      </template>
    </leave-crud>
  </div>
</template>


<script>
  export default {
    name: 'user-list',
    data() {
      return {
        url: '/user',
        searchOption: [
          {
            'key': 'name',
            'label': '用户名',
          },
          {
            'key': 'email',
            'label': '邮箱',
          },
        ],
      }
    },
    methods: {
      del(_id) {
        this.$confirm('此操作将删除该用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$httpDelete(`/user/${_id}`).then(() => {
            this.$message.success('删除成功')
            this.$refs.crud.loadData()
          }).catch(() => {})
        }).catch(() => {
        })
      },
      edit(_id) {
        this.$confirm('将该用户设为管理员?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$httpPut(`/user/${_id}`, { isAdmin: true }).then(() => {
            this.$message.success('操作成功')
            this.$refs.crud.loadData()
          }).catch(() => {})
        }).catch(() => {
        })
      },
    },
    created() {
    },
  }
</script>


<style lang="scss">
  .user-list {
  }
</style>
